<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="/js/editormd/css/editormd.css" />
    <link rel="stylesheet" type="text/css" href="/css/add.css" />
    <!--引入CSS-->
    <script src="/js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/js/webuploader/webuploader.css">
    <script  type="text/javascript"  src="/js/webuploader/webuploader.js"></script>
    <style> .ksd-buttonbox{position:fixed;right: 50px;top:40px;}</style>
</head>
<body>
<div id="app">
    <input type="hidden" ref="blogId" value="${(blogId)!}">
    <div id="main" class="yykk_editbox">
        <div class="article-head clearfix">
            <select name="topicCategoryId" v-model="blog.categoryId" @change="changeCategory($event)" class="article-title" id="category" style="width: 180px;">
                <option v-for="(category,index) in categoryList"  selected="${blog.categoryId == category.id}" v-bind:value="category.id">{{category.name}}</option>
            </select>
            <input type="text" id="article_title" onkeydown="cacheBlog()" v-model="blog.title"  class="article-title" placeholder="请在此输入标题"
                   style="width: 22%; ">
            <input type="text" id="article-desc" onkeydown="cacheBlog()" v-model="blog.description" class="article-title"
                   placeholder="用一句话描述此文章" style="width: 30%; font-weight:400;font-size: 12px;position: relative;top:-2px;">
            <span style="position: relative;width: 18%;display: inline-block">
            <input type="hidden" id="article-img"  v-model="blog.img"  ref="blogimg" class="article-title"
                   placeholder="上传封面图" style="width: 18%; font-weight:400;font-size: 12px;position: relative;top:-2px;">
            <span id="filePicker" style="position: absolute;top:-20px;left:20px;">选择图片</span>
            <img style="position: absolute;top:-20px;left:120px;" width="48" height="40" id="imgshow" alt="" :src="blog.img">
        </span>

            <span class="ksd-buttonbox">
            <a class="publish-btn js-article-publish"  @click="saveBlog" href="javascript:void(0);">发表</a>
            <a v-if="blog.id" class="publish-btn js-article-publish"  style="margin-right: 10px" :href="'/detail/'+blog.id">预览</a>
            <a class="publish-btn js-article-publish"  href="/" style="margin-right: 10px">返回</a>
        </span>
        </div>
        <!-- 文章的主体内容 textarea -->
        <div id="article-content"> </div>
    </div>
</div>
<script src="/js/editormd/editormd.js"></script>
<script src="/js/vue.global.js"></script>
<script src="/js/axios.min.js"></script>
<script src="/js/blog/add.js"></script>
<script>
    // 初始化Web Uploader
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick:{
            id:'#filePicker',
            multiple:false // 默认是：true代表选择多张上传，false只能选择一张上传
        },
        // swf文件路径
        swf:  '/js/webuploader/Uploader.swf',
        // 文件接收服务端。
        server: '/api/local/uploadjson?dir=blogs',
        // 选择文件的按钮。可选。
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });

    // 文件上传成功的回调
    uploader.on( 'uploadSuccess', function( file,response ) {
        // 把上传的图片放入到input框中
        document.getElementById("article-img").value = response.url;
        // 把图片放入到img标签进行展示
        document.getElementById("imgshow").src = response.url;
    });

</script>
</body>
</html>